<template>
  <div>
    <!-- <ul @click="handleUlClick">
      <li @click.stop="handleLiClick" v-for="(item, index) in lists" :key="index">{{ item }}</li>
    </ul> -->
    <!-- <List :list="lists" :render="renderFunc"></List> -->
    <List :list="lists">
      <CountTo slot-scope="count" :endVal="count.number"></CountTo>
    </List>
  </div>
</template>
<script>
import List from '_c/list'
import CountTo from '_c/count-to'

export default {
  components: {
    List,
    CountTo
  },
  data () {
    return {
      // lists: ['saa', 'fsa', 'fsb']
      lists: [100, 45]
    }
  },
  methods: {
    handleUlClick (event) {
      console.log(event)
    },
    handleLiClick (event) {
      console.log(event)
    },
    handleEnd () {
      console.log('end!')
    },
    // render函数
    // renderFunc (h, name) {
    //   return h('i', {
    //     style: {
    //       color: 'pink'
    //     }
    //   }, name)
    // }
    // JSX
    renderFunc (h, name) {
      return (
        <i on-click={this.handleLiClick} style={{color: 'pink'}}>{name}</i>
        // <CountTo nativeOn-click={this.handleLiClick} on-on-animation-end={this.handleEnd} endVal={name}></CountTo>
      )
    }
  }
}
</script>
